<template>
  <div class="index-content">
    <!--菜单区域-->
    <FlowHeaderButton
      :headType="headType"
      @close="close"
      @temporaryStorage="temporaryStorage"
      @approvalRecord="approvalRecord"
      @processTrace="processTrace"
      @submitForm="submitForm"
    ></FlowHeaderButton>
    <!--基本信息-->
    <EssentialInformation :title="title" ref="essentialInformationRef"></EssentialInformation>
    <!--表格填写-->
    <!--@permissionModification="permissionModification"      实际开发需要删除这段-->
    <FormBody
      :title="fromTitle"
      :gridOptions="gridOptions"
      :jurisdiction="jurisdiction"
      @permissionModification="permissionModification"
    ></FormBody>
    <!--审批记录-->
    <ApprovalRecord :data="ApprovalRecordData" id="examineAndApprove"></ApprovalRecord>
  </div>
</template>
<script setup>
import FlowHeaderButton from "@/components/flowDemo/FlowHeaderButton.vue"; //菜单组件
import EssentialInformation from "@/components/flowDemo/EssentialInformation.vue"; //基本信息组件
import FormBody from "@/components/flowDemo/FormBody"; //表格填写
import ApprovalRecord from "@/components/flowDemo/ApprovalRecord.vue";
import { reactive, ref } from "vue";
const headType = ref("正常"); //表单状态
const title = ref("自测质量材料填报"); //基本信息表单标题
const essentialInformationRef = ref(null); //基本信息组件实例
const fromTitle = ref("自测质量材料打分规则"); //表格标题
const jurisdiction = ref(false); //用户的表格编辑权限
//实际开发需要删除
const permissionModification = (value) => {
  jurisdiction.value = value;
};
/**
 * 计算得分总和
 * @param list 列表
 * @param field 字段
 * @returns {number}
 */
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count
}
const gridOptions = reactive({
  border: true, //是否显示边框
  showOverflow: false, //设置所有内容过长时是否显示为省略号
  height: 530, //表格高度
  showFooter: true, //是否显示表尾
  loading: false, //表格是否显示加载中
  lineJoin: ["title1"], //需要合并的列
  customRule: { min: 0, max: "value", value: "score" }, //自定义得分限制规则
  rowConfig: {
    //行配置信息
    isHover: true, //是否开启悬浮背景
  },
  columnConfig: {
    //列配置信息
    resizable: true, //每一列是否启用列宽调整
  },
  editConfig: {
    trigger: "click", //编辑模式--单击触发
    mode: "cell", //单元格编辑模式
    showIcon: true, //标题栏是否显示编辑图标
  },
  columns: [
    //列配置信息
    {
      type: "seq", //字段名
      title: "序号", //标题
      width: 60, //固定宽度
      align: "center", //对齐方式
    },
    {
      field: "title1", //字段名
      title: "一级内容", //标题
      align: "left", //对齐方式
      headerAlign: "center", //表头对齐方式
      minWidth: 60, //最小宽度
    },
    {
      field: "title2", //字段名
      title: "二级内容", //标题
      align: "left", //对齐方式
      headerAlign: "center", //表头对齐方式
      minWidth: 60, //最小宽度
    },
    {
      field: "qualityStandard", //字段名
      title: "质量标准", //标题
      align: "left", //对齐方式
      headerAlign: "center", //表头对齐方式
      minWidth: 160, //最小宽度
    },
    {
      field: "value", //字段名
      title: "分值", //标题
      align: "center", //对齐方式
      width: 60, //固定宽度
    },
    {
      field: "checkingRoutine", //字段名
      title: "检查程序", //标题
      align: "left", //对齐方式,
      headerAlign: "center", //表头对齐方式
      minWidth: 160, //最小宽度
    },
    {
      field: "inspectionOfData", //字段名
      title: "检查资料", //标题
      align: "left", //对齐方式,
      headerAlign: "center", //表头对齐方式
      minWidth: 160, //最小宽度
    },
    {
      field: "score", //字段名
      title: "得分", //标题
      align: "center", //对齐方式,
      width: "90", //固定宽度
      editRender: {
        enabled: jurisdiction, //权限配置
        attrs: { placeholder: "请输入得分" },
      }, //编辑渲染配置
      slots: { edit: "score_edit" }, //自定义渲染插槽
    },
    {
      field: "remark", //字段名
      title: "备注", //标题
      align: "center", //对齐方式,
      minWidth: "60", //最小宽度
      editRender: {
        enabled: jurisdiction, //权限配置
        name: "input",
        attrs: { placeholder: "请输入备注" },
      }, //编辑渲染配置
    },
  ],
  //表格数据
  data: [
    {
      id: 1,
      title1: "测试准备的完整性、及时性", //一级标题
      title2: "测试文件", //二级标题
      qualityStandard: "内控测试在规定时间内发文开展，制定完整测试方案、完备测试计划。", //质量标准
      value: "5", //分值
      checkingRoutine: "1.获取自测发文、测试方案、测试计划，对标质量标准是否在规定时间内测", //检查程序
      inspectionOfData: "内控测试发文及附件", //检查资料
      score: "0", //得分
      remark: "", //备注
    },
    {
      id: 2,
      title1: "测试准备的完整性、及时性", //一级标题
      title2: "测试方案、计划", //二级标题
      qualityStandard: "测试方案完整、计划完备，测试实施方案及计划的内容完整，包含以下内", //质量标准
      value: "10", //分值
      checkingRoutine: "1.获取并审阅内控测试方案、计划，查看各要素是否完整。", //检查程序
      inspectionOfData: "内控测试文件及附件", //检查资料
      score: "0", //得分
      remark: "", //备注
    },
    {
      id: 3,
      title1: "测试作业底稿", //一级标题
      title2: "测试作业底稿的编", //二级标题
      qualityStandard: "测试作业底稿应按照相关规范要求进行编写，包含:", //质量标准
      value: "20", //分值
      checkingRoutine: "1.获取并审阅测试作业底稿，测试发现问题的底稿全部抽取，与之存在强相关", //检查程序
      inspectionOfData: "1.内控测试作业底稿\n2.测试资料", //检查资料
      score: "0", //得分
      remark: "", //备注
    },
    {
      id: 4,
      title1: "测试作业底稿", //一级标题
      title2: "测试作业底稿的复核", //二级标题
      qualityStandard: "1.对测试作业底稿应进行两级复核，以确保作业底稿质量", //质量标准
      value: "20", //分值
      checkingRoutine: "1.检音测试作业底稿是否已进行测试组长和测试复核委托人两级复核，并已留", //检查程序
      inspectionOfData: "1.内控测试作业底稿\n2.测试资料", //检查资料
      score: "0", //得分
      remark: "", //备注
    },
    {
      id: 5,
      title1: "测试作业底稿", //一级标题
      title2: "测试盗料", //二级标题
      qualityStandard: "测试盗料包括以下内容:\n·抽样样本:", //质量标准
      value: "10", //分值
      checkingRoutine: "1.获取并审阅测试作业底稿的抽样样本，依据控制点的要求判断样本及数量", //检查程序
      inspectionOfData: "1.内控测试作业底稿\n2.测试召料", //检查资料
      score: "0", //得分
      remark: "", //备注
    },
    {
      id: 6,
      title1: "人员参与程度", //一级标题
      title2: "测试人员", //二级标题
      qualityStandard: "测试人品要求:\n·测试人员具有一定的业务能力、测试", //质量标准
      value: "5", //分值
      checkingRoutine: "1.获取自测发文、测试作业底稿，审阅发文测试人员与实际测试人员是否一致", //检查程序
      inspectionOfData: "1.内控测试作业底稿\n2.内控测试发文", //检查资料
      score: "0", //得分
      remark: "", //备注
    },
    {
      id: 7,
      title1: "测试质量", //一级标题
      title2: "测试报告", //二级标题
      qualityStandard: "测试报告一般应包括以下内容:\n·应包含测试背景情况、测试目标与范", //质量标准
      value: "15", //分值
      checkingRoutine: "1.获取并亩阅测试作业底稿、问题确认单、测试报告，相互之间描述是否一", //检查程序
      inspectionOfData: "1.测试报告\n2.测试发现问题确认单", //检查资料
      score: "0", //得分
      remark: "", //备注
    },
    {
      id: 8,
      title1: "管理层的重视程度", //一级标题
      title2: "测试发文、测试报告的审核", //二级标题
      qualityStandard: "开展测试工作经公司领导审阅发文测试结果向公司管理层汇报", //质量标准
      value: "3", //分值
      checkingRoutine: "1.获取并审阅正式下发的开展测试发文、测试结论的发文，是否经过公司管理", //检查程序
      inspectionOfData: "1.测试发文\n2.测试报告", //检查资料
      score: "0", //得分
      remark: "", //备注
    },
    {
      id: 9,
      title1: "测试结果的整改情况", //一级标题
      title2: "整改方案", //二级标题
      qualityStandard: "测试整改方案内容应包括: 需落实的原测试结论内容、建议，测试步骤、", //质量标准
      value: "2", //分值
      checkingRoutine: "1审阅测试整改方案，检音方案内容是否完整、适当。", //检查程序
      inspectionOfData: "测试整改方案", //检查资料
      score: "0", //得分
      remark: "", //备注
    },
    {
      id: 10,
      title1: "测试结果的整改情况", //一级标题
      title2: "测试整改报告", //二级标题
      qualityStandard: "测试整改报告应包括以下内容:\n·原测试问题结论及要求整改的建议:", //质量标准
      value: "5", //分值
      checkingRoutine: "1.获取并亩阅测试整改工作底稿，测试抽样、测试整改报告，重点审核判断测", //检查程序
      inspectionOfData: "1测试整改作业工作底稿\n2.测试抽样", //检查资料
      score: "0", //得分
      remark: "", //备注
    },
    {
      id: 11,
      title1: "省公司测试结果", //一级标题
      title2: "测试报告", //二级标题
      qualityStandard: "省公司进行全省内控测试，本次检育将省测试结果与该单位本次测试报告", //质量标准
      value: "5", //分值
      checkingRoutine: "省公司测试发现控制点的问题，而该单位测试没有发现，该检查项不得分。", //检查程序
      inspectionOfData: "1.省公司测试报告\n2.分公司测试报告", //检查资料
      score: "0", //得分
      remark: "", //备注
    },
  ],
  //表格尾部方法
  footerMethod({ columns, data }) {
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 3) {
          return '合计'// 如果列索引为3，返回'合计'
        }
        if (['value', 'score'].includes(column.field)) {
          //计算分值和得分，sumNum函数会计算出所有列的值的和
          return sumNum(data, column.field)
        }
        return ''
      }),
    ]
  },
}); //表单配置项
const ApprovalRecordData = ref([
  {
    id: 1,
    processingLink: "无", //处理环节
    conductor: "无", //处理事件
    handleEvent: "无", //处理事件
    nextNode: "无", //下一节点
    theNextNodeHandlesPeople: "张三", //下一节点处理人
    commitPath: "无", //提交路径
    handlingSuggestion: "无", //处理意见
    startTime: "2024年1月4日18:04:58", //开始时间
    endTime: "2024年1月4日18:04:58", //结束时间
    workday: "6", //耗时（工作日）
    naturalDay: "5", //耗时（自然日）
  },
  {
    id: 2,
    processingLink: "无", //处理环节
    conductor: "无", //处理事件
    handleEvent: "无", //处理事件
    nextNode: "无", //下一节点
    theNextNodeHandlesPeople: "张三", //下一节点处理人
    commitPath: "无", //提交路径
    handlingSuggestion: "无", //处理意见
    startTime: "2024年1月4日18:04:58", //开始时间
    endTime: "2024年1月4日18:04:58", //结束时间
    workday: "6", //耗时（工作日）
    naturalDay: "5", //耗时（自然日）
  },
]); //审批记录数据
/**
 * 关闭事件
 * @param e 传递的数据
 */
const { proxy } = getCurrentInstance();
import { useRoute,useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const close = async () => {
  const { visitedViews } = await proxy.$tab.closePage(route);
  const latestView = visitedViews.slice(-1)[0]
  await router.push(latestView.fullPath)
};
/**
 * 暂存事件
 * @param e 数据
 */
const temporaryStorage = (e) => {
  return e;
};
/**
 * 审批记录事件
 * @param e 数据
 */
const approvalRecord = (e) => {
  //跳转锚点
  document.getElementById('examineAndApprove').scrollIntoView(true)
};
/**
 * 流程跟踪事件
 * @param e 数据
 */
const processTrace = (e) => {
  return e;
};
/**
 * 提交事件
 */
const submitForm = () => {
  //gridOptions.value;    //表格组件的数据
  //essentialInformationRef.value.essentialInformation;     //基本信息组件的数据
};
</script>
<style scoped lang="less">
.index-content {
  padding-bottom: 100px;
}
</style>
